<template>
	<view class="content">
		<Header title="提交订单" :showBack='true'></Header>
		<!-- 订单信息 -->
		<view class="order-content">
			<view class="left">
				<u--image :src="orderInfo.image | setImgUrl" width="160rpx" height="160rpx"
					mode="aspectFill">
					<view slot="error" style="font-size: 24rpx;">加载失败</view>
				</u--image>
			</view>
			<view class="right">
				<view class="top">
					<view class="title">{{orderInfo.name || 0}}</view>
					<!-- <view class="tip">
						<view class="icon">
							惠
						</view>
						<view>
							1元享2节试听课等，送斯伯丁篮球一个
						</view>
					</view> -->
				</view>
				<view class="price-box">
					<view class="price">
						¥ {{orderInfo.price || 0}}
					</view>
				</view>
			</view>
		</view>
		<!-- 订单金额 -->
		<view class="order-price">
			<text>订单金额</text>
			<text class="price">￥{{orderInfo.price || 0}}</text>
		</view>
		<!-- 支付方式 -->
		<view class="pay-box">
			<view class="pay-type">
				<view class="pay">
					<image src="../../static/wechat-pay.png" style="width: 45rpx;height: 40rpx;margin-right: 8rpx;" mode=""></image>
					<text>微信支付</text>
				</view>
				<u-icon name="checkmark-circle-fill" color="#FFD650" size="22"></u-icon>
			</view>
			<!-- 留言 -->
			<view class="remark">
				<view style="margin-right: 20rpx;">
					卖家留言:
				</view>
				<u--input placeholder="您对本次交易的说明" border="none"
					:placeholderStyle="{'color':'#ABABAB','font-size': '28rpx'}" v-model="method"></u--input>
			</view>
		</view>
		<!-- 支付 -->
		<view class="pay-btn-box" @click="submitOrder">
			<view class="pay-btn">
				去支付
			</view>
		</view>
	</view>
</template>

<script>
	import Header from '@/components/header.vue'
	export default {
		data() {
			return {
				method:'',
				orderInfo:{},
				userInfo:{}
			}
		},
		components:{
			Header
		},
		onLoad() {
			this.orderInfo = uni.getStorageSync('orderInfo')
			this.getUserInfo()
		},
		methods: {
			// 获取个人信息
			getUserInfo(type){
				uni.$u.http.post('/shop/userinfo', ).then(res => {
					this.userInfo = res.data
					if(type){
						this.submitOrder()
					}
				})
			},
			// 发起支付
			submitOrder(){
				let payInfo = {
					shop_id:this.orderInfo.shop_id,
					goods_id:this.orderInfo.id,
					method:this.method,
					amount:this.orderInfo.price
				}
				if (!this.userInfo.is_bd) {
					this.$u.toast('未绑定微信')
					this.bindWechat()
					return
				}
				// 订单支付
				uni.$u.http.post('/shop/orderpay',payInfo ).then(res => {
					uni.requestPayment({
						provider:'wxpay',
						timeStamp:res.data.timeStamp,
						nonceStr:res.data.nonceStr,
						package:res.data.package,
						signType:res.data.signType,
						paySign:res.data.paySign,
						success: (payRes) => {
							uni.navigateTo({
								url:'./success'
							})
						},
						fail: () => {
							this.$u.toast('支付失败，请重试')
						}
					})
				})
			},
			// 绑定微信
			bindWechat(){
				uni.getUserProfile({
					desc:'请求获取个人信息',
					lang:'zh_CN',
					success: (userRes) => {
						if (userRes.errMsg === 'getUserProfile:ok') {
							uni.login({
								provider:'weixin',
								scopes:'auth_user',
								onlyAuthorize:true,
								success: (res) => {
									let pramas = {
										code:res.code,
										rawData:userRes.userInfo
									}
									uni.$u.http.post('/login/wxLogin',pramas ).then(bindRes => {
										this.getUserInfo('bind')
									})
								}
							})
						}else{
							this.$u.toast('授权失败')
						}
						
					}
				})
			}
			
		}
	}
</script>

<style lang="scss" scoped>
	.content{
		min-height: 100vh;
		background: #F2F2F2;
		position: relative;
	}
	.order-content {
		background: #FFFFFF;
		padding: 42rpx 36rpx 52rpx 36rpx;
		display: flex;
		justify-content: space-between;
	
		.left {
			width: 160rpx;
			height: 160rpx;
			border-radius: 18rpx;
			overflow: hidden;
		}
	
		.right {
			width: 476rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
	
			.top {
				.title {
					font-size: 32rpx;
					font-weight: bold;
					color: #000000;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
				}
	
				.tip {
					font-size: 20rpx;
					font-weight: 400;
					color: #333333;
					display: flex;
					// align-items: center;
					margin-top: 18rpx;
	
					.icon {
						width: 26rpx;
						height: 24rpx;
						background: #FF7200;
						border-radius: 4rpx;
						line-height: 24rpx;
						text-align: center;
						color: #FFFFFF;
						margin-right: 12rpx;
					}
				}
			}
	
			.price-box {
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-size: 40rpx;
				font-weight: bold;
				color: #FF2307;
			}
		}
	}
	.order-price{
		margin-top: 10rpx;
		background: #FFFFFF;
		height: 90rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0rpx 36rpx;
		font-size: 28rpx;
		font-weight: bold;
		color: #252525;
		.price{
			font-size: 40rpx;
			font-weight: bold;
			color: #FF2307;
		}
	}
	.pay-box{
		margin-top: 10rpx;
		background: #FFFFFF;
		.pay-type{
			height: 84rpx;
			padding: 0rpx 74rpx 0rpx 32rpx;
			border-bottom: 1rpx solid #E6E6E6;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.pay{
				display: flex;
				align-items: center;
			}
		}
	}
	.remark{
		height: 84rpx;
		padding: 0rpx 32rpx;
		display: flex;
		align-items: center;
	}
	.pay-btn-box{
		width: 750rpx;
		position: fixed;
		left: 0rpx;
		bottom: 52rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		.pay-btn{
			width: 572rpx;
			height: 84rpx;
			background: #D8D8D8 linear-gradient(136deg, #FFECCA 0%, #E7BC70 100%);
			border-radius: 42rpx;
			font-size: 28rpx;
			color: #333333;
			text-align: center;
			line-height: 84rpx;
		}
	}

</style>
